<template>
  <div>
    <h1>App</h1>
    lastName: {{ lastName }}
    <hr>
    firstName:{{ firstName }}
    <hr>
    fullName:{{ fullName }}
  </div>
</template>
<script setup>
import { computed, reactive, ref, shallowReactive, shallowRef, toRef, toRefs } from 'vue';

const lastName = ref('li');
const firstName = ref('jack');
const fullName = computed({
  get() {
    return `${lastName.value} ${firstName.value}`;
  },
  set(value) {
    [lastName.value, firstName.value] = value.split(' ')
  }
})

// const fullName = computed(() => {
//   return `${lastName.value} ${firstName.value}`
// });






</script>
